<template>
  <div class="list-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="4">
        <el-button type="primary" icon="el-icon-plus" @click="add()">
          新增
        </el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleExport">
          导出
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="20">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
<!--          <el-form-item>
            <div style="width: 80px">登录手机号:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.phone"
              style="width:180px;"
              placeholder="请输入登录手机号"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">公司名称:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.company_name"
              style="width:180px;"
              placeholder="请输入公司名称"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 60px">渠道商：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.channel_from"
              clearable
              placeholder="请选择渠道商"
              style="width:180px;"
            >
              <el-option
                v-for="item in channel_from"
                :key="item.id"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">账号类型：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.type"
              clearable
              placeholder="请选择账号类型"
              style="width:180px;"
            >
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">账号状态：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.status"
              clearable
              placeholder="请选择账号状态"
              style="width:180px;"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      id="out-table"
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="login_phone_number"
        label="登录手机号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="公司名称"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="pay_phone_number"
        label="收支付手机号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="channel_from_text"
        label="渠道商"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="type_text"
        label="账号类型"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="region"
        label="地区"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="创建日期"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="rate"
        label="费率"
        width="60"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="余额"
      >
        <template #default="{ row }">
          <div>{{ Math.floor(row.balance * 100) / 100 }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button
            style="font-size: 14px; margin-right: 20px"
            type="text"
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-dropdown style="color: #1890ff">
            <span class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="BrandDetail" @click.native="detail(row)">
                详情
              </el-dropdown-item>
              <el-dropdown-item @click.native="touser(row.id)">
                删除
              </el-dropdown-item>
              <el-dropdown-item @click.native="tomeal(row)">
                充值
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog :title="wintit" :visible.sync="dialogFormVisible" width="900px">
      <el-form :model="form" :rules="rules" label-width="130px" :inline="true">
        <el-form-item label="登录手机号:" prop="login_phone_number" required>
          <el-input
            v-model="form.login_phone_number"
            :rows="15"
            placeholder="请输入登录手机号"
          />
        </el-form-item>
        <el-form-item label="密码:"  prop="password" required>
          <el-input
            v-model="form.password"
            :rows="15"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input
            v-model="form.company_name"
            :rows="15"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="收支付手机号:" prop="pay_phone_number" required>
          <el-input
            v-model="form.pay_phone_number"
            :rows="15"
            placeholder="请输入收支付手机号"
          />
        </el-form-item>
        <el-form-item label="支付密码:" prop="pay_password" required>
          <el-input
            v-model="form.pay_password"
            :rows="15"
            placeholder="请输入支付密码"
          />
        </el-form-item>
        <el-form-item label="渠道商:">
          <el-select
            v-model="form.channel_from"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in channel_from"
              :key="item.id"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="账号类型:" prop="type" required>
          <el-select
            v-model="form.type"
            clearable
            placeholder="请选择账号类型"
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地区:">
          <el-input v-model="form.region" :rows="15" placeholder="请输入地区" />
        </el-form-item>
        <el-form-item label="费率:">
          <el-input
            v-model="form.rate"
            :rows="15"
            placeholder="请输入费率 单位%"
          />
        </el-form-item>
        <el-form-item label="开票科目:">
          <el-select v-model="form.invoice_subs" multiple placeholder="请选择开票科目">
            <el-option
              v-for="item in num"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生效时间:">
          <el-date-picker
            v-model="form.efficient_time"
            type="date"
            placeholder="选择生效时间"
          />
        </el-form-item>
        <el-form-item label="失效时间:">
          <el-date-picker
            v-model="form.failure_time"
            type="date"
            placeholder="选择失效时间"
          />
        </el-form-item>
        <el-form-item label="账号状态:" prop="status" required>
          <el-select
            v-model="form.status"
            clearable
            placeholder="请选择账号状态"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form :inline="true">
          <el-form-item label="营业执照:">
            <el-upload
              class="uploads"
              action=""
              ref="upload_img1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove1"
              :http-request="uploadImg1"
              :limit="1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="开户许可证:">
            <el-upload
              class="uploads"
              action=""
              ref="upload_img2"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove2"
              :http-request="uploadImg2"
              :limit="1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-form>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="开票信息" name="first">
          <el-form :model="params" :rules="rules2" label-width="130px" :inline="true">
            <el-form-item label="企业名称:" prop="company_name" required>
              <el-input
                v-model="params.company_name"
                :rows="15"
                placeholder="请输入企业名称"
              />
            </el-form-item>
            <el-form-item label="纳税识别号:" prop="tax_id_number" required>
              <el-input
                v-model="params.tax_id_number"
                :rows="15"
                placeholder="请输入纳税识别号"
              />
            </el-form-item>
            <el-form-item label="纳税人类型:" prop="taxpayer_type" required>
              <el-select
                v-model="params.taxpayer_type"
                clearable
                placeholder="请选择纳税人类型"
              >
                <el-option
                  v-for="item in taxpayer_type"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="企业地址:">
              <el-input
                v-model="params.registered_address"
                :rows="15"
                placeholder="请输入企业地址"
              />
            </el-form-item>
            <el-form-item label="企业电话:">
              <el-input
                v-model="params.registered_phone"
                :rows="15"
                placeholder="请输入企业电话"
              />
            </el-form-item>
            <el-form-item label="开户行:">
              <el-input
                v-model="params.opening_bank"
                :rows="15"
                placeholder="请输入开户行"
              />
            </el-form-item>
            <el-form-item label="银行卡号:">
              <el-input
                v-model="params.credit_card_number"
                :rows="15"
                placeholder="请输入银行卡号"
              />
            </el-form-item>
            <el-form-item label="收票人:">
              <el-input
                v-model="params.invoice_taker"
                :rows="15"
                placeholder="请输入收票人"
              />
            </el-form-item>
            <el-form-item label="收票地址:">
              <el-input
                v-model="params.invoice_address"
                :rows="15"
                placeholder="请输入收票地址"
              />
            </el-form-item>
            <el-form-item label="收票人电话:">
              <el-input
                v-model="params.contact_number"
                :rows="15"
                placeholder="请输入收票人电话"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="余额管理" name="second">
          <el-form label-width="80px">
            <el-form-item label="余额:">
              <el-input v-model="form.balance" :rows="15" disabled />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-if="!is_edit" @click="adduser()">确 定</el-button>
        <el-button type="primary" v-if="is_edit && !is_disabled" @click="edituser()">确 定</el-button>
        <el-button type="primary" v-if="is_edit && is_disabled" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 充值 -->
    <el-dialog title="充值金额" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="payform" label-width="80px">
        <el-form-item label="平台用户">{{ payform.name }}</el-form-item>
        <el-form-item label="充值金额">
          <el-input-number
            v-model="payform.change"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import { getBusinessUserLists, getChannelAccountLists,getSearchItemsss,saveBusinessUsers,getOssUploadsParam,delBusinessUsers } from '@/api/common'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import axios from "axios";

  export default {
    name: 'Admin',
    data() {
      return {
        rules: {
          login_phone_number: [
            { required: true, trigger: 'change', message: '请输入登录手机号!' }, {
              validator: function(rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("请输入正确的手机号码!"));
                } else {
                  callback();
                }
              },
              trigger: "blur"
            }
          ],
          password: [
            { required: true, trigger: 'blur', message: '请输入密码!' },
          ],
          pay_phone_number: [
            { required: true, trigger: 'change', message: '请输入收支付手机号!' }, {
              validator: function(rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("请输入正确的手机号码!"));
                } else {
                  callback();
                }
              },
              trigger: "blur"
            }
          ],
          pay_password: [
            { required: true, trigger: 'blur', message: '请输入支付密码!' },
          ],
          type: [
            { required: true, trigger: 'change', message: '请选择账号类型!' },
          ],
          status:[
            { required: true, trigger: 'change', message: '请选择账号状态!' },
          ]
        },
        rules2: {
          company_name: [
            { required: true, trigger: 'blur', message: '请输入企业名称!' },
          ],
          tax_id_number: [
            { required: true, trigger: 'blur', message: '请输入纳税识别号!' },
          ],
          taxpayer_type: [
            { required: true, trigger: 'change', message: '请选择纳税人类型!' },
          ],
        },
        channel_from: [],
        types: [
          { value: 1, label: '传媒公司' },
          { value: 2, label: '地产公司' },
        ],
        status: [
          { value: 1, label: '停用' },
          { value: 2, label: '启用' },
        ],
        list: [
          {
            mobile: '123456',
            nickname: '名称',
            user_label_info: '表情',
            content: '999',
            create_time: '2021-01-01 12:01',
          },
        ],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          page: 1,
          list_row: 10,
          phone: '',
          company_name: '',
          channel_from: '',
          type: '',
          status: '',
          activity_range: null,
          activity_start: '',
          activity_end: '',
        },
        wintit: '',
        dialogFormVisible: false,
        dialogVisible: false,
        form: {
          login_phone_number:'',
          password:'',
          company_name:'',
          pay_phone_number:'',
          pay_password:'',
          channel_from:'',
          type:'',
          region:'',
          rate:'',
          invoice_sub:'',
          invoice_subs:[],
          efficient_time:'',
          failure_time:'',
          status:'',
          business_license:'',
          open_licence:'',
          balance:'',
          invoice:[]
        },
        payform: {
          name: '',
          change: '',
        },
        change: '',
        activeName: 'first',
        start_time:'',
        end_time:'',
        num:[],
        taxpayer_type:[],
        params:{
          company_name:'',
          tax_id_number:'',
          taxpayer_type:'',
          registered_address:'',
          registered_phone:'',
          opening_bank:'',
          credit_card_number:'',
          invoice_taker:'',
          invoice_address:'',
          contact_number:'',
        },
        is_edit:false,
        is_disabled:false,
      }
    },
    watch: {
      'queryForm.activity_range'(range) {
        const [start, end] = range || ['', '']
        this.queryForm.activity_start = start
        this.queryForm.activity_end = end
      },
    },
    created() {
      this.getResData()
      this.getData()
      this.getUser()
    },
    methods: {
      //新增用户
      adduser(){
        console.log(11,this.form.invoice_subs)
        this.form.invoice_sub = JSON.stringify(this.form.invoice_subs)
        let params = {
          login_phone_number:this.form.login_phone_number,
          password:this.form.password,
          company_name:this.form.company_name,
          pay_phone_number:this.form.pay_phone_number,
          pay_password:this.form.pay_password,
          channel_from:this.form.channel_from,
          type:this.form.type,
          region:this.form.region,
          rate:this.form.rate,
          invoice_sub:this.form.invoice_sub,
          efficient_time:this.form.efficient_time,
          failure_time:this.form.failure_time,
          status:this.form.status,
          business_license:this.form.business_license,
          open_licence:this.form.open_licence,
          invoice:JSON.stringify(this.params)
        }
        saveBusinessUsers(params).then(res=>{
          if(res.code === 2000){
            this.$message.success('新增成功！')
            this.dialogFormVisible = false;
          }
        })
        this.$refs.upload_img1.clearFiles();
        this.$refs.upload_img2.clearFiles();
      },
      //编辑用户
      edituser(){
        console.log(11,this.form.invoice_subs)
        this.form.invoice_sub = JSON.stringify(this.form.invoice_subs)
        let params = {
          id:this.form.id,
          login_phone_number:this.form.login_phone_number,
          password:this.form.password,
          company_name:this.form.company_name,
          pay_phone_number:this.form.pay_phone_number,
          pay_password:this.form.pay_password,
          channel_from:this.form.channel_from,
          type:this.form.type,
          region:this.form.region,
          rate:this.form.rate,
          invoice_sub:this.form.invoice_sub,
          efficient_time:this.form.efficient_time,
          failure_time:this.form.failure_time,
          status:this.form.status,
          business_license:this.form.business_license,
          open_licence:this.form.open_licence,
          invoice:JSON.stringify(this.params)
        }
        saveBusinessUsers(params).then(res=>{
          if(res.code === 2000){
            this.$message.success('编辑成功！')
            this.dialogFormVisible = false;
          }
        })
        this.$refs.upload_img1.clearFiles();
        this.$refs.upload_img2.clearFiles();
      },
      handleClick(){

      },
      handleRemove1(){
        this.form.business_license = ''
      },
      handleRemove2(){
        this.form.open_licence = ''
      },
      uploadImg1(params) {
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf('image') != -1,
          isLt2M = file.size / 1024 / 1024 < 2
        // 这里常规检验，看项目需求而定
        if (!isImage) {
          this.$message.error('只能上传图片格式png、jpg、gif!')
          return
        }
        if (!isLt2M) {
          this.$message.error('只能上传图片大小小于2M')
          return
        }
        getOssUploadsParam().then((res) => {
          const form = new FormData()
          form.append('key', res.data.dir + file.name)
          form.append('OSSAccessKeyId', res.data.accessid)
          form.append('policy', res.data.policy)
          form.append('success_action_status', '200')
          form.append('signature', res.data.signature)
          form.append('file', file)
          console.log(222, res)
          axios({
            url: res.data.host,
            method: 'POST',
            data: form,
            processData: false,
            cache: false,
            contentType: false,
          }).then((data) => {
            this.form.business_license= res.data.host + '/' + res.data.dir + file.name
          })
        })
      },
      uploadImg2(params) {
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf('image') != -1,
          isLt2M = file.size / 1024 / 1024 < 2
        // 这里常规检验，看项目需求而定
        if (!isImage) {
          this.$message.error('只能上传图片格式png、jpg、gif!')
          return
        }
        if (!isLt2M) {
          this.$message.error('只能上传图片大小小于2M')
          return
        }
        getOssUploadsParam().then((res) => {
          const form = new FormData()
          form.append('key', res.data.dir + file.name)
          form.append('OSSAccessKeyId', res.data.accessid)
          form.append('policy', res.data.policy)
          form.append('success_action_status', '200')
          form.append('signature', res.data.signature)
          form.append('file', file)
          console.log(222, res)
          axios({
            url: res.data.host,
            method: 'POST',
            data: form,
            processData: false,
            cache: false,
            contentType: false,
          }).then((data) => {
            this.form.open_licence = res.data.host + '/' + res.data.dir + file.name
          })
        })
      },
      handlePictureCardPreview(){},
      //导出
      handleExport() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array',
        })
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            'outsheet.xlsx',
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      async getResData(){
        const { data } = await getSearchItemsss();//channelItems,accountStatusItems,accountTypeItems,invoiceItems,taxpayerTypeItems
        console.log(123,data)
        this.channel_from = data.channelItems;
        this.types = data.accountTypeItems;
        this.status = data.accountStatusItems;
        this.num = data.invoiceItems;
        this.taxpayer_type = data.taxpayerTypeItems;
      },
      getData() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          phone: this.queryForm.phone,
          company_name: this.queryForm.company_name,
          channel_from: this.queryForm.channel_from,
          type: this.queryForm.type,
          status: this.queryForm.status + '',
        }
        getBusinessUserLists(params).then((data, count) => {
          this.list = data.data
          this.total = data.count
        })
      },
      getUser() {
        /*let params = {
          page: 1,
          limit: 100000,
          // search: this.queryForm.keyword,
        }
        getChannelAccountLists(params).then((data, count) => {
          this.channel_from = data.data
        })*/
      },
      selectBuss(e) {
        this.queryForm.channel_from = e.value
      },
      selectType(e) {
        this.queryForm.type = e.value
      },
      selectStatus(e) {
        this.queryForm.status = e.value
      },
      //重置
      restart() {
        this.queryForm = []
        this.getData()
      },
      //搜索
      handleSearch() {
        this.getData()
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      queryData() {
        this.queryForm.page = 1
        this.getData()
      },
      add() {
        this.is_edit = false;
        this.dialogFormVisible = true
        this.wintit = '新增'
        this.is_disabled = false;
        this.params = {};
        this.form = {};
      },
      edit(row) {
        console.log(111,row)
        this.form = row;
        this.dialogFormVisible = true;
        this.wintit = '编辑';
        this.is_edit = true;
        this.is_disabled = false;
        this.params = {}
      },
      detail(row) {
        this.dialogFormVisible = true
        this.form = row;
        this.wintit = '详情'
        this.is_disabled = true;
        this.is_edit = true;
      },
      //删除
      touser(id){
        console.log(11,id)
        delBusinessUsers({id:id}).then(res=>{
          if(res.code === 2000){
            this.$message.success('删除成功！')
            this.getData();
          }
        })
      },
      tomeal(row) {
        this.dialogVisible = true
        this.form.name = row.mobile
      },
    },
  }
</script>

<style lang="scss" scoped>
  .search-input {
    width: 250px;
  }

  .checks-row {
    display: flex;
    align-items: center;
  }

  .check-item {
    position: relative;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-position: center;
    background-size: cover;
    border: 1px solid #c0ccda;
    border-radius: 7px;
  }

  .check-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 0.3s;
  }

  .check-item:hover .check-mask {
    opacity: 1;
  }

  .check-delete {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transform: translate(-50%, -50%);
  }

  ::v-deep .el-upload--picture-card {
    position: relative;
    width: 146px;
    height: 146px;
  }

  .check-add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
